<template>
  <view class="container_recommand_item">
    <image :src="item.image" alt="" class="container_recommand_item_pic" mode="widthFix" />
    <view class="container_recommand_item_title">
      {{ item.goodsName }}
    </view>
    <view class="container_recommand_item_money">
      <itemPrice :price="item.taxPrice"></itemPrice>
      <image src="/static/image/cart_icon.png" mode="widthFix" @click="updateGood" />
    </view>
  </view>
</template>

<script>
import itemPrice from '@/components/itemPrice'
import cartNumAddSub from './cartNumAddSub.vue'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'goodsCard',
  components: { cartNumAddSub, itemPrice },
  props: {
    item: {
      type: Object,
      default: {},
    },

    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      image: 'https://www.zjjqf.cn/file/static/undefined.png',
    }
  },
  created() {},
  computed: {
    ...mapState({
      cartItems: state => state.cart.cartItems,
    }),
    ...mapGetters(['totalPrice', 'totalGoodsCount']),
  },
  methods: {
    getImage(url) {
      const list = JSON.parse(url)
      if (list) this.image = list[0].path
      this.item.image = this.image
    },
    updateGood() {
      this.$emit('selectGoods', this.item)
    },
    goDetail() {
      this.$emit('goDetail', { item: this.item, index: this.index })
    },
    handleOperateCount(params) {
      this.$emit('operateCount', params)
    },
  },
}
</script>

<style lang="scss" scoped>
.container_recommand_item {
  background-color: white;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0 10rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  &_pic {
    width: 100%;
    padding: 20rpx;
  }
  &_title {
    width: 100%;
    text-align: left;
  }
  &_money {
    width: 100%;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    image {
      width: 45rpx;
    }
  }
}
</style>
